﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>在线编辑头像</title>
    <script src="axios.min.js"></script>
    <script src="JS/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="JS/ajaxfileupload.js" type="text/javascript"></script>
    <script src="JS/jquery.Jcrop.js" type="text/javascript"></script>
    <link href="JS/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #all {
            margin: 5 auto;
            width: 900px;
        }

        #big_main {
            width: 400px;
            height: 400px;
            float: left;
            margin-left: 50px;
            margin-top: 50px;
            text-align: left;
            padding: 0px;
            background: #bbb;
            border: 1px #bbb solid;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
        }

            #big_main .big_box {
                padding: 0px;
                margin-left: 67px;
            }

            #big_main .big_img {
                width: 267px;
                height: 400px;
                padding: 0px;
            }

        #preview_main {
            display: block;
            float: left;
            width: 200px;
            height: 400px;
            margin-top: 50px;
            margin-left: 100px;
            border-left: 1px solid #e5e5e5;
        }

            #preview_main .preview_box {
                width: 100px;
                height: 100px;
                margin-left: 60px;
                margin-top: 150px;
                overflow: hidden;
                padding: 1px;
                border: 1px rgba(0,0,0,.4) solid;
                background-color: white;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            }

        .btn_dv {
            padding: 5px;
            margin-top: 10px;
            border: 1px rgba(0,0,0,.4) solid;
            width: 800px;
            text-align: center;
        }
    </style>

</head>
<body>
    <div id="all">
        <div id="big_main">
            <div class="big_box">
                <img src="/upload/default.jpg" class="big_img" alt="big" />
            </div>
        </div>
        <div id="preview_main">
            <div class="preview_box">
                <img src="/upload/default.jpg" class="preview_img" alt="Preview" />
            </div>
        </div>
    </div>
    <div style="clear: both;">
    </div>
    <div>
        <div class="btn_dv">
            <input type="file" name="fu_UploadFile" id="fu_UploadFile" />
            <input type="button" value="更新图片" id="btn_Update" />
            <input type="button" value="确定编辑" id="btn_save" />
        </div>
    </div>
    <div id="msg" style="color:Red;">

    </div>

    <script type="text/javascript">

        var jcrop_api;
        var boundx;
        var boundy;
        var $smallbox = $('#preview_main .preview_box');
        var $smallimg = $('#preview_main .preview_box img');
        var xsize = $smallbox.width();
        var ysize = $smallbox.height();
        //定义截取的位置
        var x;
        var y;
        var w;
        var h;
        var bigsize = 1200;
        var smallsize = 400;
        var imgsrc = $(".big_img").attr("src");
        console.log(imgsrc);
        $('.big_img').Jcrop({

            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: 1
        }, function () {
            jcrop_api = this;
            jcrop_api.animateTo([100, 100, 400, 300]);
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
        });
        //截取处理函数
        function updatePreview(c) {
         
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $smallimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
                x = c.x;
                y = c.y;
                w = c.w;
                h = c.h;
                $("#msg").html("");
            } else {
                $("#msg").html("提示：请选择截取框！");
            }
        }
     
        //==绑定事件
        $("#btn_save").bind("click", function () {
            if ($("#msg").html() != "") {
                return;
            }
            var da = { X: x, Y: y, W: w, H: h, Big: bigsize, Small: smallsize, ImgSrc: imgsrc };
            console.log(JSON.stringify(da));
            //$.ajax({
            //    url: "/api/Tools/Crop",
            //    type: "post",
            //    dataType: "json",
            //    cache: false,
            //    data: da,
            //    success: function (data) {
            //        alert(data);
            //    }
            //});

            axios({
                method: 'post',
                url: '/api/Tools/Crop',
                data: da,
                // headers: header,
                responseType: 'json'
            }).then(function (response) {
                console.log('获取到的数据');
                var res = response.data;
                console.log(res);
                if (res.result && res.returnData) {

                }


            }).catch(function (error) {
                console.log(error);
            });

        })

        $("#btn_Update").bind("click", function () {
            var path = document.getElementById("fu_UploadFile").value;
            if ($.trim(path) == "") { alert("请选择要上传的文件"); return; }
            var result_msg = "";
          
        })
        //上传图片
        function upload() {
            $.ajaxFileUpload({
                url: '/api/Tools/Upload',
                type: 'post',
                dataType: 'text',
                data: {},
                secureuri: false, //一般设置为false
                fileElementId: 'fu_UploadFile', // 上传文件的id、name属性名
                success: function (data) {
                    console.log(data);
                    //var hh = $.parseJSON(data);
                    //var img = hh.src;
                    //var big = hh.big;
                    //var gw = hh.gw;
                    //var gh = hh.gh;
                    //var ml = hh.ml;
                    //var mt = hh.mt;
                    //bigsize = big;
                    //smallsize = 400;
                    //imgsrc = img;
                    jcrop_api.destroy();
                    $(".preview_img").attr("src", "");
                    //$(".big_img").attr("src", img);
                    //$(".big_img").css("width", gw + "px");
                    //$(".big_img").css("height", gh + "px");
                    //$(".big_box").css("margin-left", ml + "px");
                    //$(".big_box").css("margin-top", mt + "px");

                    $('.big_img').Jcrop({
                        onChange: updatePreview,
                        onSelect: updatePreview,
                        aspectRatio: 1
                    }, function () {
                        jcrop_api = this;
                        jcrop_api.animateTo([100, 100, 400, 300]);
                        var bounds = this.getBounds();
                        boundx = bounds[0];
                        boundy = bounds[1];
                    });
                },
                error: function (data, status, e) {
                    alert("错误：上传组件错误，请检察网络!");
                }
            });
        }

                //========定义函数结束==========

    </script>
</body>
</html>